<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>popover</title>
    <link href="../../css/bootstrap3.min.css" rel="stylesheet">
    <style>
        body {
            position: relative;
            margin-top: 10%;
            left: 30%;
            padding: 0;
        }
    </style>
</head>
<body>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
<script src="../../js/jquery.js"></script>
<script src="../../lib/Koala_ToolTip.js">  </script>
<script>
    $(function(){
        $('[data-toggle="tooltip"]').tooltip();
    });
</script>
</body>
</html>